import React from 'react';
import {Form, Input, Card, Button} from 'antd';
import ArticleCategory from 'components/common/ArticleCategory';
import PicUpload from 'components/common/PicUpload';
import {model} from 'utils/model';
import {nextTick} from 'utils/nextTick';
import _ from 'lodash';
import { getServer } from 'utils/share';
import 'braft-editor/dist/index.css';


const {TextArea} = Input;
const  baseUrl = getServer()['admin'];

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 4
  },
  wrapperCol: {
    span: 10
  }
};
const btnItemLayout = {
  wrapperCol: {
    offset: 4,
    span: 10
  }
};

@model('picCreate')
class PicCreate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: null
    };
  }

  handleEditorChange = (editorState) =>{
    this.setState({
      editorState
    });
  }

  onOk() {
    const {form, add, edit, id} = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        if (id) {
          edit(values);
        } else {
          add(values);
        }
      }
    });
  }


  render() {
    const { record = {}, form, loading, id } = this.props;
    console.log(record);
    console.log(id);
    const { getFieldDecorator } = form;
    const articleProps = {
      isShow: false,
      val: _.isNil(record.category_id) ? '' : record.category_id
    };
    
    const uploadProps = {
      picLength: 3,
      fileBizType: 'resource',
      listType: 'picture',
      pic: record.url && record.url.split(',')
    };
    console.log(baseUrl, uploadProps);
    return (
      <div>
        <Card
          title="新增图片"
          style={{width: '100%'}}
          loading={loading.detail}
        >
          <FormItem
            {...formItemLayout}
            label="标题"
          >
            {getFieldDecorator('title', {
              initialValue: record.title || '',
              rules: [{required: true, message: '请填写标题'}]
            })(
              <Input placeholder="标题" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="作者"
          >
            {getFieldDecorator('author', {
              initialValue: record.author || '',
              rules: [{required: true, message: '请填写作者'}]
            })(
              <Input placeholder="作者" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="分类"
          >
            {getFieldDecorator('category_id', {
              initialValue: record.category_id || '',
              rules: [{required: true, message: '请选择分类'}]
            })(
              <ArticleCategory {...articleProps} />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="关键字"
          >
            {getFieldDecorator('keywords', {
              initialValue: record.keywords || '',
              rules: [{required: true, message: '请填写关键字'}]
            })(
              <TextArea placeholder="关键字" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="附件"
        >
            {getFieldDecorator('url', {
          })(
            <PicUpload
              {...uploadProps}
            />
          )}
            <span>最多允许上传3张附件，每张不超过5M，格式支持jpg、jpeg、png</span>
          </FormItem>
          <FormItem
            {...btnItemLayout}
          >
            <Button
              type="primary"
              loading={loading.create}
              onClick={() => nextTick(() => this.onOk())}
            >提交</Button>
          </FormItem>
        </Card>
      </div>
    );
  }
}

export default Form.create()(PicCreate);
